<template>
	<view class="page">
		<page-head :title="title"></page-head>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image v-if="showImg" :src="value.img"></image>
					</view>
				<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
					<view class="text" style="height: 50upx;text-align: left">
						{{value.productName}}
					</view>
					<view class="uni-flex uni-row">
						<view class="text" style="flex: 1;">小代:{{value.price1}}</view>
						<view class="text" style="flex: 1;">大代:{{value.price2}}</view>
						<view class="text" style=" color:#FF3333; flex: 1;">零售:{{value.price3}}</view>
					</view>
				</view>
				</view>
			</view>
		</view>
		</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'media-list',
				showImg: false,
				list: [
					{productName:'小黄瓜紧肤水',price1:'36',price2:'30',price3:'45'},
					{productName:'玫瑰柔肤水',price1:'49',price2:'41',price3:'62'},
					{productName:'金盏花调理水',price1:'62',price2:'52',price3:'82'},
					{productName:'芦荟保湿露',price1:'42',price2:'38',price3:'58'},
					{productName:'ha保湿乳',price1:'38',price2:'32',price3:'45'},
					{productName:'ha亮肤精华乳',price1:'62',price2:'52',price3:'78'},
					{productName:'胎盘乳',price1:'47',price2:'37',price3:'72'},
					{productName:'ha保湿乳霜',price1:'52',price2:'42',price3:'78'},
					{productName:'杏仁胎盘乳霜',price1:'57',price2:'47',price3:'78'},
					{productName:'止痘液',price1:'55',price2:'47',price3:'70'},
					{productName:'祛印胶',price1:'50',price2:'45',price3:'65'},
					{productName:'蜂胶滋养眼霜',price1:'53',price2:'43',price3:'78'},
					{productName:'京卫乳木果护手霜',price1:'12',price2:'11',price3:'20'},
					{productName:'京卫防晒隔离乳',price1:'58',price2:'54',price3:'72'},
					{productName:'芦荟胶',price1:'20',price2:'20',price3:'25'},
					{productName:'永宝补水紧致啫喱',price1:'35',price2:'30',price3:'45'},
					{productName:'永宝补水润白霜',price1:'35',price2:'30',price3:'45'}

				]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showImg = true;
			}, 400)
		}
	}
</script>

<style>
.title {
	padding: 20upx;
}

.uni-media-list-text-top {
	line-height: 36upx;
	font-size: 30upx;
	margin-left: 20upx;
}
	.flex-item {
		width: 33.3%;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
	
</style>
